<template>
  <!-- 全页面容器，支持暗黑模式 -->
  <view :class="{ dark: isDark }">
    <!-- 自定义导航栏模块 -->
    <view class="nav-bar" :class="{ dark: isDark }">
      <!-- 返回按钮 -->
      <view class="nav-back" @click="goBack"><</view>
      <!-- 页面标题 -->
      <view class="nav-title">修改{{ fieldName }}</view>
    </view>

    <!-- 内容区域 -->
    <view class="container" :class="{ dark: isDark }">
      <!-- 表单卡片区域 -->
      <view class="form-area card">
        <!-- 头像修改区域 -->
        <view v-if="field === 'avatar'" class="avatar-section" @click="chooseAvatar">
          <!-- 头像图片 -->
          <image :src="value" class="avatar-img" mode="aspectFill"></image>
          <!-- 提示文字 -->
          <text class="avatar-tip">点击更换头像</text>
        </view>

        <!-- 文字输入区域 -->
        <view v-else class="input-section">
          <view class="input-with-clear">
            <!-- 输入框 -->
            <input
              class="input"
              v-model="inputValue"
              :placeholder="'请输入' + fieldName"
              @confirm="save"
              confirm-type="done"
              :type="getInputType"
              :maxlength="getMaxLength"
            />
            <!-- 清空按钮 -->
            <view v-if="inputValue" class="clear-btn" @click="inputValue = ''">×</view>
          </view>
          
          <!-- 输入提示 -->
          <view v-if="inputTips" class="input-tips">{{ inputTips }}</view>
        </view>

        <!-- 保存按钮 -->
        <button class="save-btn" @click="save">保存</button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isDark: false,      // 是否暗黑模式
      field: '',          // 当前编辑的字段名(avatar/username/email/carname)
      value: '',          // 字段初始值(头像URL或其他值)
      inputValue: '',     // 输入框的值
      fieldName: '',      // 字段中文名称
      user: {             // 用户数据对象
        id: 20,
        username: '',
        email: '',
        carname: '',
        avatar: '/static/avatar.png'  // 默认头像
      }
    }
  },

  computed: {
    // 根据字段类型返回输入框类型
    getInputType() {
      switch(this.field) {
        case 'email':
          return 'email'
        case 'username':
        case 'carname':
        default:
          return 'text'
      }
    },
    
    // 根据字段类型返回最大长度限制
    getMaxLength() {
      switch(this.field) {
        case 'username':
          return 20
        case 'carname':
          return 15
        case 'email':
          return 50
        default:
          return 100
      }
    },
    
    // 输入提示信息
    inputTips() {
      switch(this.field) {
        case 'username':
          return '用户名长度不能超过20个字符'
        case 'email':
          return '请输入有效的邮箱地址'
        case 'carname':
          return '小车名长度不能超过15个字符'
        default:
          return ''
      }
    }
  },

  // 页面加载生命周期
  onLoad(options) {
    // 从路由参数获取字段信息
    this.field = options.field || ''
    
    // 从全局获取用户数据
    const globalUser = getApp().globalData.user || {}
    this.user = { ...this.user, ...globalUser }
    
    // 初始化字段值
    this.value = this.user[this.field] || ''
    this.inputValue = this.value
  
    // 字段名映射表
    const fieldMap = {
      avatar: '头像',
      username: '名字',
      email: '账号',
      carname: '小车名',
    }
    this.fieldName = fieldMap[this.field] || '字段'
  },

  // 页面显示生命周期
  onShow() {
    // 获取全局暗黑模式设置
    this.isDark = getApp().globalData.darkMode || false
  },

  // 方法定义
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
	  uni.navigateBack({
			url: '/pages/edit-profile/edit-profile' 
	  })
    },

    /**
     * 选择头像
     */
    chooseAvatar() {
      uni.chooseImage({
        count: 1, // 只能选择一张图片
        sizeType: ['compressed'], // 压缩图
        sourceType: ['album', 'camera'], // 相册和相机
        success: (res) => {
          const filePath = res.tempFilePaths[0]

          // 上传头像到服务器
          uni.uploadFile({
            url: 'https://yourapi.com/api/upload/avatar', // 上传接口
            filePath, // 文件路径
            name: 'file', // 文件字段名
            success: (uploadRes) => {
              try {
                const result = JSON.parse(uploadRes.data)
                if (result.code === 200) {
                  // 更新头像URL
                  this.value = result.url
                  uni.showToast({ title: '上传成功' })

                  // 更新全局用户数据
                  this.user.avatar = result.url
                  this.updateGlobalUser()
                } else {
                  uni.showToast({ title: result.msg || '上传失败', icon: 'none' })
                }
              } catch (e) {
                uni.showToast({ title: '上传响应异常', icon: 'none' })
              }
            },
            fail: () => {
              uni.showToast({ title: '上传失败', icon: 'none' })
            },
          })
        },
      })
    },

    /**
     * 验证输入内容
     */
    validateInput(value) {
      if (!value || value.trim() === '') {
        return { valid: false, message: `${this.fieldName}不能为空` }
      }
      
      // 邮箱验证
      if (this.field === 'email') {
        const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
        if (!emailReg.test(value)) {
          return { valid: false, message: '请输入有效的邮箱地址' }
        }
      }
      
      // 长度验证
      if (value.length > this.getMaxLength) {
        return { 
          valid: false, 
          message: `${this.fieldName}长度不能超过${this.getMaxLength}个字符` 
        }
      }
      
      return { valid: true }
    },

    /**
     * 更新全局用户数据
     */
    updateGlobalUser() {
      getApp().globalData.user = this.user
      uni.setStorageSync('user', this.user)
    },

    /**
     * 保存修改
     */
	save() {
	  // 获取新值(头像用value，其他用inputValue)
	  const newValue = this.field === 'avatar' ? this.value : this.inputValue
	  
	  // 验证输入
	  const validation = this.validateInput(newValue)
	  if (!validation.valid) {
		uni.showToast({ title: validation.message, icon: 'none' })
		return
	  }
	  
	  // 如果值未改变，直接返回
	  if (newValue.trim() === this.value) {
		uni.showToast({ title: '内容未改变', icon: 'none' })
		setTimeout(() => {
		  uni.navigateBack()
		}, 500)
		return
	  }

	  // 显示加载中
	  uni.showLoading({ title: '保存中...' })

	  // 更新用户数据
	  this.user[this.field] = newValue.trim()
	  
	  // 统一API基础地址
	  const baseUrl = 'http://localhost:8080'
	  let apiUrl = ''
	  switch(this.field) {
		case 'username':
		  apiUrl = `${baseUrl}/update/username`
		  break
		case 'email':
		  apiUrl = `${baseUrl}/update/email`
		  break
		case 'carname':
		  apiUrl = `${baseUrl}/update/carname`
		  break
		case 'avatar':
		  apiUrl = `${baseUrl}/update/avatar`
		  break
		default:
		  apiUrl = `${baseUrl}/update`
	  }
	  
	  // 准备请求参数
	  const requestData = this.field === 'avatar' 
		? { id: this.user.id, avatar: this.user.avatar }
		: { id: this.user.id, [this.field]: this.user[this.field] }
	  
	  // 获取token
	  const token = uni.getStorageSync('token')
	  
	  // 打印调试信息
	  console.log('保存请求信息：')
	  console.log('URL:', apiUrl)
	  console.log('参数:', requestData)
	  console.log('Token是否存在:', !!token)
	  
	  // 检查必要参数
	  if (!this.user.id) {
		uni.hideLoading()
		return uni.showToast({ title: '用户ID不存在', icon: 'none' })
	  }
	  
	  if (!token) {
		uni.hideLoading()
		return uni.showToast({ title: '请先登录', icon: 'none' })
	  }

	  // 调用API保存到服务器
	  uni.request({
		url: apiUrl,
		method: 'PUT',
		header: {
		  'Content-Type': 'application/json',
		  'Authorization': 'Bearer ' + token
		},
		data: requestData,
		success: (res) => {
		  console.log('保存请求响应:', res)
		  
		  // 检查HTTP状态码
		  if (res.statusCode !== 200) {
			return uni.showToast({ 
			  title: `服务器错误: ${res.statusCode}`, 
			  icon: 'none' 
			})
		  }
		  
		  // 检查响应数据
		  if (!res.data) {
			return uni.showToast({ title: '服务器未返回数据', icon: 'none' })
		  }
		  
		  // 根据不同可能的成功标识判断
		  const isSuccess = res.data.code === 200 || res.data.success === true
		  
		  if (isSuccess) {
			// 本地更新
			this.updateGlobalUser()
			
			uni.showToast({ title: '保存成功' })
			console.log(`保存${this.fieldName}成功，更新后的值:`, this.user[this.field])

			// 延迟返回
			setTimeout(() => {
			  uni.navigateBack()
			}, 500)
		  } else {
			uni.showToast({ 
			  title: res.data?.msg || res.data?.message || '保存失败', 
			  icon: 'none' 
			})
		  }
		},
		fail: (err) => {
		  console.error('保存请求失败:', err)
		  // 更详细的错误提示
		  let errorMsg = '网络错误，请稍后重试'
		  if (err.errMsg.includes('timeout')) {
			errorMsg = '请求超时'
		  } else if (err.errMsg.includes('fail')) {
			errorMsg = '请求失败，请检查网络'
		  }
		  uni.showToast({ title: errorMsg, icon: 'none' })
		},
		complete: () => {
		  uni.hideLoading()
		}
	  })
	},
  },
}
</script>
<style lang="scss">
/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  background: #ffffff;
  color: #333;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
  // padding: 30rpx 48rpx;
}

/* 返回按钮样式 */
.nav-back {
  font-size: 36rpx;
  color: #333;
  cursor: pointer;
  user-select: none;
}

/* 导航标题样式 */
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: inherit;
}

/* 暗黑模式导航栏样式 */
.nav-bar.dark {
  background: #1e1e1e;
  color: #fff;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.5);
}

.nav-bar.dark .nav-back {
  color: #fff;
}

.nav-bar.dark .nav-title {
  color: #fff;
}

/* 主容器样式 */
.container {
  min-height: 100vh;
  padding: 48rpx;
  background: #f5f5f5;
  color: #333;
}

/* 暗黑模式容器样式 */
.dark .container {
  background: #121212;
  color: #ccc;
}

/* 卡片样式 */
.card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
  padding: 48rpx;
}

/* 暗黑模式卡片样式 */
.dark .card {
  background: #1e1e1e;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.5);
}

/* 头像区域样式 */
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 20rpx 0;
}

/* 头像图片样式 */
.avatar-img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background: #ddd;
}

/* 头像提示文字样式 */
.avatar-tip {
  margin-top: 20rpx;
  color: #999;
  font-size: 28rpx;
}

/* 暗黑模式提示文字样式 */
.dark .avatar-tip {
  color: #777;
}

/* 输入区域样式 */
.input-section {
  margin-top: 20rpx;
  margin-right: 50rpx;
}

/* 输入框和清空按钮容器样式 */
.input-with-clear {
  position: relative;
}

/* 输入框样式 */
.input {
  width: 100%;
  padding: 24rpx;
  border: 1rpx solid #ccc;
  border-radius: 12rpx;
  font-size: 32rpx;
  background: #fff;
  color: #333;
  outline: none;
}

/* 输入框聚焦样式 */
.input:focus {
  border-color: #ff6b35;
}

/* 暗黑模式输入框样式 */
.dark .input {
  background: #2a2a2a;
  color: #fff;
  border-color: #444;
}

/* 输入提示样式 */
.input-tips {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #999;
}

.dark .input-tips {
  color: #666;
}

/* 清空按钮样式 */
.clear-btn {
  position: absolute;
  right: 0rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28rpx;
  color: #999;
  cursor: pointer;
  user-select: none;
}

/* 清空按钮悬停样式 */
.clear-btn:hover {
  color: #ff6b35;
}

/* 保存按钮样式 */
.save-btn {
  margin-top: 48rpx;
  background: #ff6b35;
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
  padding: 24rpx 0;
  border: none;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s ease;
  width: 100%;
}

/* 保存按钮按下效果 */
.save-btn:active {
  opacity: 0.8;
}
</style>
